<template>
  <div class="group">
    <el-breadcrumb separator="/">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>团购管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="21">
        <el-col :span="5">
          <span>搜索：</span
          ><el-input
            v-model="queryInfo.keyword"
            placeholder="团购名称"
          ></el-input>
        </el-col>
        <el-col :span="6">
          <span>状态：</span>
          <el-select
            v-model="value"
            @change="changeOption"
            placeholder="请选择"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.label"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="pojo.tid1"
            filterable
            placeholder="请选择省份"
            @change="changePro"
          >
            <el-option
              v-for="item in tlist1"
              :key="item.value"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="pojo.tid2"
            filterable
            placeholder="请选择城市"
            @change="changeCity"
          >
            <el-option
              v-for="item in tlist2"
              :key="item.value"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-select
            v-model="pojo.tid3"
            filterable
            placeholder="请选择区县"
            @change="changeArea"
          >
            <el-option
              v-for="item in tlist3"
              :key="item.value"
              :value="item.id"
              :label="item.name"
            >
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3">
          <el-input v-model="queryInfo.keyword" placeholder="关键字"></el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="findKeyWord">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-table :data="result.length ? result : tableData" style="width: 100%">
      <el-table-column label="序号" prop="id" width="60px"></el-table-column>
      <el-table-column label="图片" prop="image" width="90px"></el-table-column>
      <el-table-column
        label="楼盘名称"
        prop="title"
        width="90px"
      ></el-table-column>
      <el-table-column
        label="楼盘地址"
        prop="area"
        width="250px"
      ></el-table-column>
      <el-table-column
        label="发起人"
        prop="name"
        width="80px"
      ></el-table-column>
      <el-table-column label="起始时间" prop="create_time"></el-table-column>
      <el-table-column label="状态" prop="type" width="120px"></el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="handleDelete(scope.row)"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data () {
    return {
      options: [
        {
          value: '选项1',
          label: '请选择'
        },
        {
          value: '选项2',
          label: '开启'
        },
        {
          value: '选项3',
          label: '关闭'
        }
      ],
      area: [],
      value: '',
      values: '',
      queryInfo: {
        keyword: ''
      },
      tableData: [],
      result: [],
      pojo: {
        tid1: '',
        tid2: '',
        tid3: ''
      },
      tlist1: [],
      tlist2: [],
      tlist3: []
    }
  },
  methods: {
    changeOption (val) {
      this.tableData.map((item) => {
        if (val === '开启') {
          this.result = this.tableData.filter((item) => {
            if (item.type === '已开团') {
              return item
            }
          })
        } else if (val === '关闭') {
          this.result = this.tableData.filter((item) => {
            if (item.type === '未开团') {
              return item
            }
          })
        } else {
          this.result = []
        }
      })
    },
    handleDelete (row) {
      this.$http.delete(`/group/${row.id}`).then((res) => {
        if (res.data.code !== 1) {
          this.$message.error(res.data.message)
        } else {
          this.$message.success(res.data.message)
          this.getGroupList(this.queryInfo)
        }
      })
    },
    findKeyWord () {
      this.getGroupList(this.queryInfo)
    },
    getGroupList () {
      this.$http
        .get('/group', {
          params: { ...this.queryInfo, pid: 0 }
        })
        .then((res) => {
          if (res.data.code === 1) {
            this.tableData = res.data.data.data
            this.tlist1 = res.data.data.provinces
          }
        })
    },
    changePro () {
      this.pojo.tid2 = ''
      this.pojo.tid3 = ''
      this.$http
        .get('/group', {
          params: {
            pid: this.pojo.tid1
          }
        })
        .then((res) => {
          this.tlist2 = res.data.data.provinces
        })
      this.getGroupList(this.queryInfo)
    },
    changeCity () {
      this.pojo.tid3 = ''
      this.$http
        .get('/group', {
          params: {
            pid: this.pojo.tid2
          }
        })
        .then((res) => {
          this.tlist3 = res.data.data.provinces
        })
      this.getGroupList(this.queryInfo)
    },
    changeArea () {
      this.$http
        .get('/group', {
          params: {
            pid: this.pojo.tid2
          }
        })
        .then((res) => {
          this.tlist3 = res.data.data.provinces
        })
      this.getGroupList(this.queryInfo)
    }
  },
  created () {
    this.getGroupList(this.queryInfo)
  }
}
</script>

<style scoped>
.el-row,
.el-col {
  display: flex;
  align-items: center;
}

.el-col span {
  width: 72px;
}
</style>
